<template>
	<view>
		<!-- 状态栏高度 设置背景色 占位状态栏-->
		<view class="ztl"
			:style="{'height':statusBarHeight}"></view>
		<!-- 占位盒子 -->
		<view class=""
			:style="{'height': height}"></view>
		<!-- 导航栏 -->
		<navBar color="#000"
			bgColor="#FFF">
			<image :slot="'left'"
				@click="navToBack"
				:src="xcxImgUrl && xcxImgUrl+'page_activity/static/back.svg'"
				style="width: 36rpx;height: 36rpx;">
			</image>
			<text :slot="'content'">活动详情</text>
		</navBar>
		<scroll-view @scroll="scroll"
			@scrolltolower="scrolltolower"
			:style="{'height': 'calc(100vh - ' + demoTopHieght +')'}"
			scroll-y
			class="mian_activeDetails ">
			<view @click="showDetails"
				class="details">
				<image class="mr10 ml5"
				:src="xcxImgUrl && xcxImgUrl+'page_activity/static/huodongmiaoshu.svg'"></image>
				活动描述
			</view>

			<view class="mian_activeDetails_top ">
				<image :src="xcxImgUrl && xcxImgUrl+'page_activity/static/background.png'"></image>
				<view class="pd10"
					style="position: absolute;left: 0;right: 0;z-index: 3;">
					<view class="mian_activeDetails_top_title">
						{{activityInfo.name ? activityInfo.name : ''}}
					</view>
					<view v-if="activityInfo && activityInfo.status && activityInfo.status == 2 && Utils.getTime(Utils.DateFormateTime(activityInfo.startTime),'miao') > 0"
						class="mian_activeDetails_top_djs">
						<text>距离开始</text>
						<!-- <text class="ml5">{{Utils.getTime(Utils.DateFormateTime(activityInfo.startTime),'day')}}天</text> -->
						<view class="ml5">
							<u-count-down
							        :time="time"
							        format="DD:HH:mm:ss"
							        autoStart
							        millisecond
							        @change="onChange"
							    >
							        <view class="time">
							            <text class="time__item">{{ timeData.days }}&nbsp;天</text>
							            <text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;:</text>
							            <text class="time__item">{{ timeData.minutes }}&nbsp;:</text>
							            <text class="time__item">{{ timeData.seconds }}&nbsp;</text>
							        </view>
							    </u-count-down>
							<!-- <u-count-down :time="Utils.getTime(Utils.DateFormateTime(activityInfo.startTime),'miao')"
								format="HH:mm:ss"
								autoStart
								millisecond
								@change="onChange">
								<view class="time">
									<view class="time__custom">
										<text
											class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
									</view>
									<text class="time__doc">:</text>
									<view class="time__custom">
										<text class="time__custom__item">{{ timeData.minutes }}</text>
									</view>
									<text class="time__doc">:</text>
									<view class="time__custom">
										<text class="time__custom__item">{{ timeData.seconds }}</text>
									</view>
								</view>
							</u-count-down> -->
						</view>
					</view>
					<view v-else-if="activityInfo && activityInfo.status && activityInfo.status == 3"
						class="mian_activeDetails_top_djs">
						活动已经开始啦
					</view>
					<view v-else-if="activityInfo && activityInfo.status && activityInfo.status == 4"
						class="mian_activeDetails_top_djs">
						活动已经结束
					</view>
					<!-- <view class="mian_activeDetails_top_miaoshu mt10">
						活动描述：{{activityInfo.summary ? activityInfo.summary : ''}}
					</view> -->
				</view>
			</view>
			<view class="pd10">
				<view class="main_newcomerBenefits_List mt10 pd10"
					:style="{'min-height': 'calc(100vh - ' + demoTopHieght + ' - 400rpx - 20rpx - 60rpx ' +')'}">
					<view class="main_newcomerBenefits_List_top">
						<text class="main_newcomerBenefits_yhj_top_left">活动商品</text>

					</view>

					<view v-for="(item,index) in activeList"
						:key="index">
						<view class="main_newcomerBenefits_List_item mt10 pd10">
							<view class="main_newcomerBenefits_List_item_left" v-if="updateNoneImg"  @click="toDetails(item)">
								<image style="width: 100%;height: 100%;border-radius: 12rpx;"
									:src=" item.spuInfo && 
								 item.spuInfo.picture ? uploadImgUrl +  item.spuInfo.picture : 
								 updateMorentu"></image>
							</view>
							<view class="main_newcomerBenefits_List_item_right ml5"  >
								<view class="main_newcomerBenefits_List_item_right_top texttowShow" @click="toDetails(item)">
									{{item.spuInfo && 
									item.spuInfo.name ? 
									item.spuInfo.name : ''}}
								</view>
								<view class="main_newcomerBenefits_List_item_right_content mt10">
									{{
										item.defaultSKU && 
										item.defaultSKU.unitInfo && 
										item.defaultSKU.unitInfo.name &&
										item.defaultSKU.specsOptionInfo && 
										item.defaultSKU.specsOptionInfo.length ? 
										item.defaultSKU.specsOptionInfo.map(it=>it.optionName).join('-') + ' / ' + item.defaultSKU.unitInfo.name  :
										item.defaultSKU.unitInfo.name }}
								</view>
								<view class="main_newcomerBenefits_List_item_right_bom mt10">
									￥{{
										item.defaultSKU &&
										item.defaultSKU.priceTrackingInfo &&
										item.defaultSKU.priceTrackingInfo.price ?
										Utils.formatToFixed(item.defaultSKU.priceTrackingInfo.price,'price') :
										item.defaultSKU && 
										item.defaultSKU.skuPriceInfo && 
										item.defaultSKU.skuPriceInfo.length &&
										item.defaultSKU.skuPriceInfo[0].price ?
										Utils.formatToFixed(item.defaultSKU.skuPriceInfo[0].price,'price') : 0
									}}
									<!-- <text>新人专享价</text> -->
								</view >
								<view v-if="item.isBuy || item.num == 0">
									<view v-if="activityStatus !== 2" class="main_newcomerBenefits_List_item_right_sub buy" @click="goBuy(item)">立即购买</view>
									<view v-if="activityStatus == 2" class="main_newcomerBenefits_List_item_right_sub buy" >即将开启</view>
								</view>
								<view v-else class="main_newcomerBenefits_List_item_right_sub"
									style="width:200rpx;">
									<!-- 立即购买 -->
									<u-number-box>
										<view slot="minus"
											@click="delNum(item)"
											class="minus"
											:style="{background:item.num < 1 ? 'rgba(255, 0, 0, 0.5)' : 'rgba(255, 0, 0, 1)'}"
											>
											<u-icon name="minus"
												size="12"></u-icon>
										</view>
										<u-input border='none'
											style="width: 50px;text-align: center;"
											class="input"
											inputAlign='center'
											slot="input"
											type='number'
											v-model='item.num'
											@blur='blurNum(item)'>
										</u-input>
										<!-- <text slot="input"
											style="width: 50px;text-align: center;"
											class="input"></text> -->
										<view slot="plus"
											@click="addNum(item)"
											class="plus">
											<u-icon name="plus"
												color="#FFFFFF"
												size="12"></u-icon>
										</view>
									</u-number-box>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 购物车 -->
		<view @click="tapGwc"
		    v-if="activityStatus !== 2"
			class="gouwuche"
			:class="gwcShowe ? 'gouwuche_active' : ''">
			<image class="gwc"
				style="width: 64rpx;height: 64rpx"
				:src="xcxImgUrl && xcxImgUrl+'gouwuche.svg'"></image>
			<image style="width: 100%;height: 100%;"
				:src="xcxImgUrl && xcxImgUrl+'page_activity/static/huodonggouwuche.svg'"></image>
			<view class="jiaobiao" v-if="updateQty < 100">
				{{updateQty }}
			
			</view>
			<view class="jiaobiao" v-else>
				...
			
			</view>
		</view>

		<!-- 描述弹出层 -->
		<u-popup :show="showDetailsP"
			:round='30'
			mode='center'>
			<view class="showDetailsP">
				<image class="showDetailsPT"
					:src="xcxImgUrl && xcxImgUrl+'page_activity/static/huodongmiaoshu1.svg'"></image>
				<view v-html="activityInfo.summary ? activityInfo.summary : ''"
					class="showDetailsPText pd10">
				</view>
				<image @click="showDetailsP = false"
					class="showDetailsPB"
					:src="xcxImgUrl && xcxImgUrl+'page_activity/static/huodongguanbi.svg' "></image>
			</view>
		</u-popup>

		<!-- 绑定手机号弹出层 -->
		<bindingPhoneNumber :bindingPhoneNumberShow='bindingPhoneNumberShow'
			@close='bindingPhoneNumberlose'
			@save='bindingPhoneNumberSave'
			v-if="bindingPhoneNumberShow"></bindingPhoneNumber>
	</view>
</template>

<script>
	import {
		listMallCommodityActivityCommodityPageInfo,
		addMallShoppingCart,
		getCurrentMallMember,
		listMallShoppingCartPageInfo,
		getCatCount
	} from '@/api/global.js'
	import bindingPhoneNumber from '@/components/bindingPhoneNumber/bindingPhoneNumber.vue'
	import {
		mapGetters
	} from 'vuex'
	import {
		uploadImgUrl
	} from "@/utils/request.js"
	export default {
		components: {
			bindingPhoneNumber
		},
		computed: {
			...mapGetters(['demoTopHieght']),
			//返回默认图
			updateMorentu() {
				return this.$store.state.morentu || ""
			},
			//返回有图无图控制
			updateNoneImg() {
				return this.$store.state.configSetting.noneImge == 1 ? false : true
			},
			// //返回总数量
			// updateQty() {
			// 	return this.activeList.reduce((init, item) => {
			// 		return init += item.num * 1
			// 	}, 0)
			// }
		},
		data() {
			return {
				time:'',//倒计时时间
				activityStatus:'',//预热2
				updateQty:'',
				countList:[],
				totalCount:0,
				bindingPhoneNumberShow: false, //绑定手机号弹出层
				uploadImgUrl,
				statusBarHeight: '',
				height: '',
				timeData: {}, //倒计时对象
				gwcShowe: false, //控制购物车移动
				type: "warning",
				value: 100,
				activeType: '', //活动类型 1.满赠 2.满减
				activityInfo: {}, //活动对象
				activeList: [], //活动商品列表
				pageData: {
					currentPage: '',
					pageSize: ''
				},
				lastPage: 0, //最后总页数
				showDetailsP: false, //描述详情弹出层
				isBuy:true,
				activityId:``
			};
		},
		onShow() {
			this.$nextTick(() => {
				// 获取状态栏的高度
				this.statusBarHeight = this.$store.state.statusBarHeight * 2 + 'rpx'
				// 计算站位的高度
				this.height = (this.$store.state.navBarHeight) * 2 + 'rpx'
				//获取高度
				this.Utils.getDemoTopHeight('mian_activeDetails')

				this.pageData.currentPage = 1
				this.activeList = []
				this.getActiveList() //获取活动商品
				// this.getTotalCount();
				this.getCountList()
				this.getCatToally()
			})
		},
		onLoad(options) {
			// 接收活动类型
			console.log(options);
			if(options?.type == 1) {
				this.activetypes = 3
			}else {
				this.activetypes = options?.type || ''
			}
			this.activeType = options?.type || ''
			this.activityId = options?.activityId;
			this.activityStatus = options?.status;
			// console.log(options?.activityInfo, this.activityInfo)
			// return
			// this.activityInfo.summary = this.activityInfo.summary.replace(/\<img /g, '<img style="max-width:100%"');
			 //获取活动商品
			// this.getTotalCount();
		},
		methods: {
			// 获取购物车数量
					async getCatToally(){
						const {data} = await getCatCount({
							type:this.activetypes,
							activityId:this.activityId
						})
					 console.log(data.info);
					 this.updateQty = data.info
							
					},
			goBuy(item){
				item.isBuy = false;
				this.addNum(item,1);
			},
			toDetails(item){
				uni.navigateTo({
					url:`/page_public/commodityDetail?commodityId=${item.commodityId}`
				})
			},
			//关闭绑定手机号弹出
			bindingPhoneNumberlose() {
				this.bindingPhoneNumberShow = false
			},
			//手机号弹窗框确认
			bindingPhoneNumberSave() {
				//关闭弹窗
				this.bindingPhoneNumberShow = false
			},
			//点击显示活动详情
			showDetails() {
				this.showDetailsP = true
			},
			toDetails(item) {
							console.log(1111);
							console.log(item);
							uni.navigateTo({
								url: `/page_public/commodityDetail?commodityId=${item.commodityId}`
							})
						},
			isTourist() {
				return new Promise(async (resolve) => {
					let res = await getCurrentMallMember()
					console.log(res);
					if (res.data?.info?.status == 1) { //游客
						// return
						this.bindingPhoneNumberShow = true;
						resolve(true);
					} else {
						resolve(false);
					}
				})
			},
			//点击加号添加数量
			async addNum(item,type='') {
				let result = await this.isTourist();
				if (result) return;
				if(type){
					++item.num
					this.addCrad(item)
				}else{
					++item.num
					console.log(item.num);
					this.addCrad(item)
				}
				this.totalCount =  this.totalCount + 1

			},
			//点击减号减少数量
			async delNum(item) {
				let result = await this.isTourist();
				if (result) return;
				--item.num
				if (item.num < 1) {
					item.num = 0
				}
				this.addCrad(item)
				this.totalCount =  this.totalCount -1
				if(this.totalCount <= 0){
					this.totalCount = 0
				}
			},
			//添加购物车接口
			async addCrad(item) {
				//判断类型
				let activeTypes = this.activeType == 1 ? 3 : this.activeType == 2 ? 2 : ''
				let res = await addMallShoppingCart({
					type: activeTypes, //类型[1：普通购物车 2：商品满减购物车 3：商品满赠购物车]
					commodityId: item.commodityId || '', //商品SPUid
					commodityDetailId: item.commodityDetailId || '', //商品SKUid
					qty: item.num || 0,
					price: item?.defaultSKU?.priceTrackingInfo?.price || item?.defaultSKU?.skuPriceInfo?.[0]?.price || 0,
					money: this.Utils.formatToFixed(item.num * (item?.defaultSKU?.priceTrackingInfo?.price || item?.defaultSKU?.skuPriceInfo?.[0]?.price),
						'money') || 0,
					summary: '',
					activityId: item.activityId || '', //活动id
					activityDetailId: item.detailId || '', //活动详情id
				})
				this.getCatToally()
			},
			//数量输入框失去焦点
			async blurNum(item) {
				let result = await this.isTourist();
				if (result) return;
				if (item.num <= 0) {
					item.num = 0
				}
				if (item.num * 1 > 10 ** 7) {
					item.num = 10 ** 7;
				}
				item.num = this.Utils.formatToFixed(item.num * 1, 'number');
				if (item.num.toString().startsWith('0') && !item.num?.includes('.')) {
					item.num = item.num?.slice(1, item.num.length)
				}
				item.num = parseInt(item.num)
				this.addCrad(item)
				
			},
			// 获取全部数量
			// async getTotalCount(){
			// 	let type = this.activeType == 1 ? 3 : this.activeType == 2 ? 2 : ''
			// 	uni.showLoading()
			// 	let res = await listMallShoppingCartPageInfo({
			// 		type: type, //类型[1：普通购物车 2：商品满减购物车 3：商品满赠购物车]
			// 		warehouseId: this.$store?.state?.warehouseInfo?.warehouseId || '', //仓库
			// 		sort: 1,
			// 		activityId: this.activityId || '', //活动id
			// 		currentPage:1,
			// 		pageSize:1000
			// 	})
			// 	if(res.code == 2000){
			// 		this.totalCount = res.data.info.total || 0;
			// 	}else{
			// 		this.Utils.toast(`${res.msg}`);
			// 	}
			// 	console.log(res.data.info.total)
			// }
			// ,
			async getCountList() {
				uni.showLoading()
				//判断类型
				// let activeTypes = this.activeType == 1 ? 1 : this.activeType == 2 ? 2 : this.activeType == 3 ? 3 : ''
				let res = await listMallCommodityActivityCommodityPageInfo({
					currentPage:'',
					pageSize:'',
					sort: 1,
					activityId: this.activityId,
					warehouseId: this.$store.state.warehouseInfo.warehouseId,
					type: this.activeType //类型[1：商品满赠 2：商品满减 3：商品满返]
				})
				if (res.code == 2000) {
					uni.hideLoading()
					//添加数量
					res.data.info.list = res.data.info.list?.map(item => {
						return {
							...item,
							num: item?.defaultSKU?.carQty || 0,
							isBuy:item?.defaultSKU?.carQty && item?.defaultSKU?.carQty >= 1 ? false : true
						}
					})
					this.countList = (res?.data?.info?.list || []);
					console.log(this.countList,'this.countList');
				} else {
					this.Utils.toast(`${res.msg}`)
				}
			},
			//获取活动商品
			async getActiveList() {
				uni.showLoading()
				//判断类型
				// let activeTypes = this.activeType == 1 ? 1 : this.activeType == 2 ? 2 : this.activeType == 3 ? 3 : ''
				let res = await listMallCommodityActivityCommodityPageInfo({
					...this.pageData,
					sort: 1,
					activityId: this.activityId,
					warehouseId: this.$store.state.warehouseInfo.warehouseId,
					type: this.activeType //类型[1：商品满赠 2：商品满减 3：商品满返]
				})
				if (res.code == 2000) {
					uni.hideLoading()
					//添加数量
					res.data.info.list = res.data.info.list?.map(item => {
						return {
							...item,
							num: item?.defaultSKU?.carQty || 0,
							isBuy:item?.defaultSKU?.carQty && item?.defaultSKU?.carQty >= 1 ? false : true
						}
					})
					if(this.pageData.currentPage == 1){
						this.activeList = res?.data?.info?.list || [];
					}else{
						this.activeList = this.activeList.concat(res?.data?.info?.list || []);
					}
					this.activityInfo = res?.data?.activity;
					this.activityInfo.summary = res?.data?.activity?.summary.replace(/\<img /g,
						'<img style="max-width:100%"');
					this.time = this.Utils.getTime(this.Utils.DateFormateTime(this.activityInfo.startTime),'miao')
					console.log(this.activeList);
					this.lastPage = res?.data?.info?.lastPage
				} else {
					this.Utils.toast(`${res.msg}`)
				}
				console.log(res);
			},
			//下拉加载
			scrolltolower() {
				this.pageData.currentPage++
				if (this.pageData.currentPage > this.lastPage) {
					return
				} else {
					this.getActiveList()
				}
			},
			//返回
			navToBack() {
				// uni.navigateTo({
				// 	url:'/page_activity/activeCenter'
				// })
				uni.navigateBack();
			},
			//倒计时
			onChange(e) {
				this.timeData = e
			},
			//点击购物车
			async tapGwc() {
				let result = await this.isTourist();
				if (result) return;
				if (!this.updateQty) return;
				if (this.gwcShowe) {
					uni.navigateTo({
						url: `/page_activity/activeCard?activeType=${this.activeType}&activityId=${this.activityInfo.activityId}`
					})
				} else {
					this.gwcShowe = !this.gwcShowe
				}
			},
			//监听页面滚动事件
			scroll(e) {
				this.gwcShowe = false
			}

		}
	}
</script>

<style lang="scss"
	scoped>
	/deep/.nav_item {
		  padding-left: 6rpx
	}
	.showDetailsP {
		min-width: 600rpx;
		width: 600rpx;
		height: 836rpx;
		border-radius: $border_radius_10;
		border: 10rpx solid red;
		position: relative;
		background-color: #FFFCF1;
		color: $text_color_333;
		font-size: $font_size_14;

		.showDetailsPT {
			width: 280rpx;
			height: 88rpx;
			position: absolute;
			top: -28rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		.showDetailsPText {
			margin-top: 100rpx;
			height: calc(100% - 140rpx);
			overflow: hidden;
			overflow-y: scroll;
		}

		.showDetailsPB {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			bottom: -100rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.ztl {
		width: 100%;
		background-color:#fff;
	}

	.mian_activeDetails {
		width: 100%;
		box-sizing: border-box;
		background-color: $bg_activity_color;
		position: relative;

		.details {
			z-index: 999;
			width: 200rpx;
			height: 60rpx;
			border-radius: 60rpx 0 0 60rpx;
			color: white;
			background-color: rgba(242, 242, 242, 0.48);
			box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
			position: absolute;
			top: 154rpx;
			right: 0;
			display: flex;
			align-items: center;
			font-size: $font_size_14;
			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.mian_activeDetails_top {
			width: 100%;
			height: 400rpx;
			position: relative;
			// border: 1px solid black;
			box-sizing: border-box;
			// background-repeat: no-repeat;
			// background-image: url('~@/page_activity/static/background.png');
			// background-size: 100% 100%;
			image {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
			}

			.mian_activeDetails_top_title {
				font-size: 40rpx;
				font-weight: bold;
				color: #fff;
				margin-bottom: 40rpx;
				 margin-top: 30px;
				white-space: nowrap; /* 防止文本换行 */
				 overflow: hidden;    /* 隐藏超出部分 */
				text-overflow: ellipsis;
			}

			.mian_activeDetails_top_djs {
				font-size: $font_size_14;
				font-weight: bold;
				color: #fff;
				display: flex;
				align-items: center
			}

			.mian_activeDetails_top_miaoshu {
				font-size: $font_size_12;
				color: #fff;

			}
		}

		.main_newcomerBenefits_List {
			width: 100%;
			// height: 1200px;
			box-sizing: border-box;
			background-color: #FFF;
			border-radius: $border_radius_10;

			.main_newcomerBenefits_List_top {
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: $text_color_333;


			}

			.main_newcomerBenefits_List_item {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				border-bottom: 1px solid #F5F5F5;

				.main_newcomerBenefits_List_item_left {
					width: 180rpx;
					height: 180rpx;
					border-radius: $border_radius_10;
				}

				.main_newcomerBenefits_List_item_right {
					position: relative;
					flex: 1;

					.main_newcomerBenefits_List_item_right_top {
						width: 100%;
						font-size: $font_size_14;
						color: $text_color_333;
					}

					.main_newcomerBenefits_List_item_right_content {
						font-size: $font_size_14;
						color: $text_color_808080;
					}

					.main_newcomerBenefits_List_item_right_bom {
						font-size: $font_size_14;
						color: $text_color_ec4141;
						font-weight: bold;

						text {
							font-size: $font_size_12;
							margin-left: 20rpx;
							font-weight: normal;
						}
					}

					.main_newcomerBenefits_List_item_right_sub {
						// border-radius: 60rpx;
						// padding: 10rpx 20rpx;
						// background-color: $bg_activity_color;
						// color: #FFF;
						// font-size: $font_size_12;
						// width: 100rpx;
						position: absolute;
						right: 0;
						bottom: 0;	
						
					}
					.buy {
						width: 140rpx;
						 height: 56rpx;
						 background-color: #ec4141;
						 color:#fff;
						 font-size: $font_size_14;
						 border-radius: 28rpx;
						 text-align: center;
						 line-height: 56rpx;
					}
				}
			}
		}
	}

	.gouwuche {
		width: 112rpx;
		height: 112rpx;
		bottom: 10%;
		right: -40rpx;
		background-color: transparent;
		position: fixed;
		opacity: .5;
		transition: all .5s;

		.gwc {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: 999;
		}

		.jiaobiao {
			position: absolute;
			left: 0;
			top: 0;
			color: #FFF;
			background-color: $bg_activity_color;
			border-radius: 50%;
			    padding: 2px;
			    width: 16px;
			    height: 16px;
			    text-align: center;
			    line-height: 16px;
		}
	}

	.gouwuche_active {
		right: 40rpx;
		opacity: 1;
	}

	.time {
		@include flex;
		align-items: center;
     
		.time__item {
		color:#fff !important;
		}
		&__custom {
			margin-top: 4px;
			width: 22px;
			height: 22px;
			background-color: #FFA7A7;
			border-radius: 4px;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;

			&__item {
				color: #fff;
				font-size: 12px;
				text-align: center;
			}
		}

		&__doc {
			color: #FFF;
			padding: 0px 4px;
		}

		&__item {
			color: #606266;
			font-size: 15px;
			margin-right: 4px;
		}
	}

	// 计步器
	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
		 /deep/.u-icon__icon.uicon-minus {
							font-weight: bold !important;
							color: #fff !important;
							font-size: 24rpx !important;
						}
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: $text_color_ec4141;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		/deep/.u-icon__icon.uicon-plus{
									font-weight: bold !important;
									font-size: 24rpx !important;
								}
	}

	/deep/uni-image {
		border-radius: $border_radius_10;
	}
	/deep/.u-input {
			background-color: transparent !important;
			padding: 10px 10px !important;
		}
</style>